Day17——RWD響應式網頁設計

2024 iThome 鐵人賽

佛心分享-IT 人自學之術

JavaScript自學分享系列第 17 篇

16th鐵人賽

姐姐恩

2024-10-13 20:57:52

58 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

RWD響應式網頁設計(Responsive Web Design)

核心觀念:

為了在不同大小的螢幕上，網頁版面皆能正常顯示，所以版面要能根據螢幕大小，自動調整RWD。(例如:在電腦上是左右排列的版面，移至手機上就須更改為垂直排列的版面)
Media Query:根據螢幕寬度，調整CSS的設定。

@media(螢幕大小條件){ 
    符合條件時的CSS設定
}

實務程式碼練習&註解筆記:

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>RWD 回應式網頁切版</title>
        <link rel="stylesheet" type="text/css" href="rwd-layout.css" />
    </head>
    <body>
        <div class="headline">回應式網頁範例</div>
        <!--任何東西只要有兩個版本就可以用顯示與隱藏來切換。-->
        <div class="desktop-menu">選項一、選項二、選項三</div>
        <div class="mobile-menu">
            <img src="menu.svg" width="30px" height="30px"/>
        </div>
        <div class="list"> <!--設定容器，將項目加入其中。-->
            <div class="product">Product 1</div>
            <div class="product">Product 2</div>
            <div class="product">Product 3</div>
            <div class="product">Product 4</div>
        </div>
    </body>
</html>

CSS部分

/*螢幕寬度大於 1250px (電腦)，套用這個原始設計。*/
.headline{
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}
.desktop-menu{
    text-align: center;
    display: block;
}
.mobile-men{
    text-align: center;
    display: none;
}
.list{
    display:flex;
    justify-content: center;
}
.product{
    flex:none;
    width:280px;
    margin: 10px;
    background-color: #ffcccc;
}

@media(max-width:1250px){ /*符合條件的化，將覆蓋原始設計*/
    /*螢幕寬度小於 1250px (平板)，套用這個區塊。*/
    .list{
        flex-wrap: wrap;
    }
    .product{
        width: 45%; /*兩排相加 45%+45%=90%，剩下10%去下一排*/
    }
}

@media(max-width:500px){ /*符合條件的化，將覆蓋原始設計*/
    /*最小的手機大小為360px*/
    /*螢幕寬度小於 500px (手機) ，套用這個區塊。*/
    .headline{
        font-size: 20px;
    }
    .desktop-menu{
        display: none;
    }
    .mobile-menu{
        display: block;
    }
    .product{
        width: 90%; /*單排呈現，故為90%，剩下10%去下一排*/
    }
}

學習資源：
CSS 響應式設計
 RWD 回應式設計核心觀念 - Front End 網頁前端工程教學
 RWD 回應式設計實務技巧 - Front End 網頁前端工程教學